<script>
import index from '@/api/index.js'
import commonComment from "@/components/commonComment.vue";

export default {
  name: 'app',
  data() {
    return {
      postId: this.$route.query.postId,
      post: {
        "postId": "post3",
        "postUserId": "user1",
        "postState": 1,
        "postTitle": "在idea中没有找到local tomcat",
        "postReadCount": 365,
        "postCommunity": "community1",
        "postCreateTime": 1701825385000,
        "postUpdateTime": 1701825385000,
        "postOperator": null,
        "whatPostContent": {
          "postId": "post3",
          "postContent": "<p>在idea中没有找到local tomcat</p><br/><p>只能通过装插件使用smart tomcat&nbsp;</p>"
        },
        "commentCount": 2,
        "postUserName": "黄明俊",
        "whatTags": []
      },
      comments: [],
      postComment:''
    }
  },
  mounted() {
    this.init()
  },
  watch:{
    '$route.query.postId':{
      handler(newValue){
        this.postId = newValue
        this.init()
      }
    },
  },
  components: {commonComment},
  methods: {
    formatDate(date) {
      var date1 = new Date(date);
      var YY = date1.getFullYear() + '-';
      var MM = (date1.getMonth() + 1 < 10 ? '0' + (date1.getMonth() + 1) : date1.getMonth() + 1) + '-';
      var DD = (date1.getDate() < 10 ? '0' + (date1.getDate()) : date1.getDate());
      var hh = (date1.getHours() < 10 ? '0' + date1.getHours() : date1.getHours()) + ':';
      var mm = (date1.getMinutes() < 10 ? '0' + date1.getMinutes() : date1.getMinutes()) + ':';
      var ss = (date1.getSeconds() < 10 ? '0' + date1.getSeconds() : date1.getSeconds());
      return YY + MM + DD + " " + hh + mm + ss;
    },

    init() {
      index.postInfo(this.postId).then((res) => {
        this.post = res.data.data
      })
      index.getComment(this.postId).then((res) => {
        this.comments = res.data.data
      })
      this.$forceUpdate()
    },

    sendComment(parentId,value){
      console.log(parentId)
      index.sendComment(parentId,value).then((res)=>{
        if (res.data.code === 401){
          alert("请登录")
        }else {
          alert(res.data.msg)
        }
      })
    }
  }
}
</script>

<template>
  <div id="app">
    <div class="root-container">
      <div class="main-container">
        <!-- 主要内容左侧问答区 -->
        <div class="main-content">
          <div class="post_content">
            <div class="post_content_top">
              <div class="post_title">{{ post.postTitle }}</div>
              <div class="user_info">
                <div class="user_name">{{ post.postUserName }}</div>
                <div>发布于 <span class="post_create_time">{{ formatDate(new Date(post.postCreateTime)) }}</span></div>
                <div>更新于 <span class="post_update_time">{{ formatDate(new Date(post.postUpdateTime)) }}</span></div>
              </div>
            </div>
            <div id="post_info" v-html="post.whatPostContent.postContent">
            </div>

            <div>关于：
              <ul class="post_tag">
                <li v-for="(tagItem,index) in post.whatTags" :key="index">{{ tagItem.tagTitle }}</li>
              </ul>
            </div>
            <div class="post_foot">
              <div class="post_reply">
                <input class="reply_content" type="text" id="post" v-model="postComment">
                <button class="reply_button" @click="sendComment(post.postId,postComment)">回复</button>
              </div>
            </div>
          </div>
          <div class="post_comment">
            <common-comment v-for="(item,index) in comments"
                            :tree-data="item.whatCommentDTOList"
                            :key="index"></common-comment>
          </div>
        </div>

      </div>

    </div>
  </div>
</template>

<style scoped>

.post_content {
  width: 800px;
  /*background-color: #00d200;*/
  padding: 20px;
  margin-right: 10px;
  margin-bottom: 20px;
}

.user_name {
  color: #009d2c;
  font-weight: bold;
  font-size: 18px;


}

.user_name:after {
  content: "|";
  margin: 0 10px;
  color: #fdfdfd;
}

.post_create_time, .post_update_time {
  color: #666666;

}

.post_title {
  font-size: 26px;
  margin: 10px 0;
}

.user_info {
  display: flex;
  align-items: center;
}

#post_info {
  border-top: 1px solid #e0e0e0;
  padding: 10px 0;
  margin: 20px 0;
  border-bottom: 1px solid #e0e0e0;
}

.post_tag {
  padding: 10px 0;
}

.post_foot {
  padding-top: 10px;
}

.post_content {
  background-color: #fff;

}


.post_tag li {
  display: inline;
  font-size: 12px;
  background-color: #d1ffc6;
  padding: 2px 5px;
  border-radius: 5px;

  color: #218204;
  margin: 5px;
}

.post_comment {
  background-color: #f7fff9;
  width: 800px;
  /*background-color: #00d200;*/
  padding: 20px;
  margin-right: 10px;
  margin-bottom: 20px;
}

.post_comment_content {
  margin: 15px 0;
  display: flex;
  justify-content: space-between;
}

.post_comment_user {
  display: flex;
}

.comment_comment {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

}


.comment_comment div {
  max-width: 800px;
  overflow: auto;
}

.comment_reply, .post_reply {
  display: flex;
  justify-content: space-between;

}

.reply_content {
  border: 1px solid #397e2d;
  height: 28px;
  line-height: 28px;
  background-color: #fff;
  flex-grow: 1;
  padding-left: 5px;
  box-sizing: border-box;
}

.reply_content:focus {
  border: 1px solid #397e2d;
}

.reply_button {
  height: 28px;
  line-height: 28px;
  width: 50px;
  border: none;
  color: white;
  background-color: rgb(57, 126, 45);
  cursor: pointer;
}


</style>